<template>
  <app-page>
    <mxp-refresh-page ref="mxpRefreshPageRef" :reachBottom="true" :queryData="queryList">
      <view class="list">
        <view v-for="(item, index) in dataList" :key="index" class="item">
          <view class="img-box">
            <image class="img" src="/static/images/personal/top-up-item.svg" mode="scaleToFill"></image>
          </view>
          <view class="item-info">
            <view class="content-box">
              <text class="title">{{ item.orderSubject }}</text>
              <view class="top-box">
                <text class="time">{{ item.outTradeNo }}</text>
              </view>
              <view class="top-box">
                <text class="time">{{ item.createTime }}</text>
              </view>
            </view>
            <view class="numb-box">
              <text class="numb">{{ item.totalAmount }}</text>
            </view>
          </view>
        </view>
      </view>
    </mxp-refresh-page>
    <!-- #ifdef MP-TOUTIAO -->
    <service-button :location="['15px', '45px']"></service-button>
    <!-- #endif -->
  </app-page>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import AppPage from '@/components/app-page/app-page.vue';
  // #ifdef MP-TOUTIAO
  import ServiceButton from '@/components/pay/service-button/service-button.vue';
  // #endif
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import { type SavingsRecord, savingsRecordsAxios } from '@/api/pay';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);

  const dataList = ref<SavingsRecord[]>([]);

  /**
   * 获取数据
   */
  async function queryList(ins: Ins) {
    try {
      const res = await savingsRecordsAxios(ins.page, ins.size);
      dataList.value = ins.page > 1 ? dataList.value.concat(res.data.records) : res.data.records;
      ins.setMoreSuccess(res.data.records.length, res.data.total);
    } catch (error) {
      console.log('error====', error);
      ins.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    box-sizing: border-box;
    width: 100%;

    .item {
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
      place-content: center flex-start;
      align-items: start;
      width: 100%;
      padding: 15px;

      .item-info {
        display: flex;
        flex: 1;
        justify-content: space-between;
      }

      .img-box {
        display: flex;
        flex-flow: row nowrap;
        place-content: center center;
        align-items: center;
        width: 64rpx;
        height: 64rpx;
        margin-right: 28rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .content-box {
        display: flex;
        flex: 1;
        flex-flow: column nowrap;
        place-content: center center;
        align-items: flex-start;

        .top-box {
          display: flex;
          flex-flow: column nowrap;
          gap: 6rpx;
          place-content: center space-between;
          align-items: start;
          width: 100%;
          margin-top: 18rpx;

          .time {
            font-size: 12px;
            color: #999999;
          }
        }

        .title {
          margin-top: 2px;
          font-size: 28rpx;
          font-weight: 600;
          color: #000000;
        }
      }

      .numb-box .numb {
        font-size: 32rpx;
        font-weight: 500;
        color: #ff5600;
      }
    }
  }
</style>
